<!-- 添加试题-判断题 -->
<template>
  <div id="addFill">
    <div class="jx-content">
      <div class="answer-editor">
        <h2 class="jx-title">试题题目</h2>
        <mavonEditor ref="question"></mavonEditor>
      </div>
      <div class="question-editor">
        <h2 class="jx-title">试题答案</h2>
        <el-radio v-model="addForm.answer[0].isCorrect" :label="true">对</el-radio>
        <el-radio v-model="addForm.answer[0].isCorrect" :label="false">错</el-radio>
      </div>

      <div class="btn-group">
        <button @click="addQuestion" class="button-style question-submit">保存</button>
      </div>
    </div>
  </div>
</template>
<script>
import mavonEditor from "../../../components/mavonEditor";
import axios from "axios";
import $ from "jquery";
export default {
  components: { mavonEditor },
  data() {
    return {
      addForm: {
        //章节ID
        chapterId: '',
        //试题类型
        questionType: 2,
        //问题描述，题干
        content: "",
        //备选答案
        answer: [
          {
            content: "正确",
            isCorrect: true
          }
        ]
        //查重百分比
        //duplicatePercent:50
      }
    };
  },
  // created() {
  //   //监听改变赋值
  //   let that = this;
  //   that.$root.$on("chapter-id", function(id) {
  //     that.addForm.chapterId = id;
  //   });
  // },
  computed: {},
  watch: {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      //console.log(this.$route.params.id);
      //console.log(this.$route.params.row,6666);
    },
    //路由监听
    watchRoute(){
      this.addForm.chapterId = this.$route.params.id;
    },
    //添加试题
    addQuestion() {
      var that = this;
      //添加问题
      that.addForm.content = that.$refs["question"].renders;
      //添加答案
      that.addForm.answer[0].isCorrect;
      axios
        .post(
          "/tes/course/1/businessType/1/question-repository/question",
          that.addForm
        )
        .then(function(res) {
          console.log("成功1");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              that.$message({
                message: "添加成功",
                type: "success"
              });
            }
            else{
              that.$message({
                message: res.data.message,
                type: "error"
              });
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    }
  }
};
</script>
<style lang="scss">
@import "./../../../styles/layout/color_variables";
//编辑器设置z-index
@for $i from 1 through 15 {
  //$item: nth($stars, $i);
  .question-choice {
    &:nth-child(#{$i}) {
      .v-note-wrapper.markdown-body {
        position: relative;
        z-index: 16-$i;
      }
    }
  }
}

body {
  background: $bg-gray;
  overflow-y: scroll;
}
#addFill {
  width: $width;
  margin: 20px auto;
  color: #727272;

  //保存提交
  .question-submit {
    margin-left: -111px;
  }
  //编辑器
  .v-note-wrapper {
    min-height: 120px;
  }
  .form-group {
  }
  .btn-group {
    text-align: center;
  }
  .answer-editor {
    margin-bottom: 60px;
    .v-note-wrapper {
      min-height: 150px;
    }
  }
  .question-editor {
    .jx-title {
      display: flex;
      justify-content: space-between;
    }
  }
  .question-choice {
    display: flex;
    margin-bottom: 40px;
    .question-left {
      color: #727272;
      min-width: 30px;
    }
    .question-center {
      width: 100%;
    }
    .question-right {
      min-width: 140px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .question-del {
        width: 20px;
        height: 20px;
        padding: 0;
        font-size: 24px;
        border-radius: 20px;
        color: $title-gray;
        border: 1px solid $title-gray;
        text-align: center;
        line-height: 6px;
        cursor: pointer;
        &:hover {
          color: #1277eb;
          border: 1px solid #1277eb;
        }
      }
      .question-del.is-disabled {
        &:hover {
          color: #c0c4cc;
          cursor: not-allowed;
          background-image: none;
          background-color: #fff;
          border-color: #ebeef5;
        }
      }
      .question-label {
        .chose-del {
          color: #727272;
          margin-right: 10px;
          vertical-align: middle;
        }
      }
    }
  }
}
</style>
